import React, { useState, useCallback, useEffect } from 'react'

// 用来存储函数的 set 集合
const set = new Set()

export const Search: React.FC = () => {
    const [kw, setKw] = useState('')

    // const onKwChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    //     setKw(e.currentTarget.value)
    // }
    const onKwChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
        setKw(e.currentTarget.value)
    }, [])
    // 把 onKwChange 函数的引用，存储到 set 集合中
    set.add(onKwChange)
    // 打印 set 集合中元素的数量
    console.log('set 中函数的数量为：' + set.size)

    return (
        <>
            <input type="text" value={kw} onChange={onKwChange} />
            <p>{kw}</p>
            <hr />
        </>
    )
}
// 文本框组件的 props 类型
interface SearchInputType { onChange: InputOnChange }
type InputOnChange = (e: React.ChangeEvent<HTMLInputElement>) => void
// 单词对象的 TS 类型
type WordType = { id: number; word: string }
// 子组件
const SearchInput: React.FC<SearchInputType> = React.memo((props) => {
    useEffect(() => {
        console.log('触发了 SearchInput 的 rerender')
    })

    return <input onChange={props.onChange} placeholder="请输入搜索关键字" />
})
// 子组件：搜索结果
const SearchResult: React.FC<{ query: string }> = (props) => {
    const [list, setList] = useState<WordType[]>([])

    useEffect(() => {
        // 如果 query 为空字符串，则清空当前的列表
        if (!props.query) return setList([])

        // 查询数据
        fetch('https://api.liulongbin.top/v1/words?kw=' + props.query)
            .then((res) => res.json())
            .then((res) => {
                // 为列表赋值
                setList(res.data)
            })
    }, [props.query])

    // 渲染列表数据
    return list.map((item) => (<div key={item.id}>
        <span>word：{item.word}</span>
        <br />
    </div>))
}

export const SearchBox: React.FC = () => {
    const [kw, setKw] = useState('')
    const onKwChange = useCallback<InputOnChange>((e) => {
        setKw(e.currentTarget.value)
    }, [])

    return (
        <div style={{ height: 500 }}>
            <SearchInput onChange={onKwChange} />
            <hr />
            <SearchResult query={kw} />
        </div>
    )
}